<template>
  <div class="wrapper-page">
    <div class="left-wratter">
      <img src="@/assets/images/login/100buy_login.png" class="login-img" alt="">
    </div>
    <div class="right-wrapper">
      <div class="right-content">
        <!-- <img src="@/assets/images/home/logo.png" class="logo-img" alt=""> undone-->
        <div class="title-text">{{ $t("user.resetPassword") }}</div>
        <div class="div-input">
          <Input size="large" v-model="form.email" :placeholder="$t('public.enterEmail')" />
        </div>
        <div class="div-input">
          <Input size="large" v-model="form.vcode" :placeholder="$t('public.emailVerificationCode')">
          <Button v-if="num >= 60" @click="sendCode" :loading="codeLoading" class="btn-code" size="large" slot="append">
            {{ $t('public.getVerificationCode') }}
          </Button>
          <Button v-else class="btn-code" size="large" slot="append">
            {{ num }} S
          </Button>
          </Input>
        </div>
        <div class="div-input">
          <Input size="large" v-model="form.newPassword" :placeholder="$t('forgot.enterNewPassword')" password
            type="password" />
        </div>
        <div class="div-input">
          <Input size="large" v-model="form.cPassword" :placeholder="$t('forgot.confirmPassword')" password
            type="password" />
        </div>
        <Button class="btn" :loading="loading" @click="onResetPassword" type="primary" size="large" long>{{
          $t('public.confirm') }}</Button>
        <div class="fun">
          {{ $t('public.alreadyHaveAccount') }}<router-link class="fun-item" to="/login">{{ $t('public.login')
            }}</router-link>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { register, resetPassword, sendCodeByEmail } from "@/api/user";
import { mapState } from 'vuex';
import { debounce } from "@/common/common";

export default {
  name: "index",
  data() {
    return {
      appName: process.env.VUE_APP_NAME,
      codeLoading: false, // 发送验证码code
      num: 60,
      timer: '',
      loading: false,
      single: false, // 同意注册协议
      form: {
        email: '', // 邮箱
        vcode: '', // 验证码
        newPassword: '', // 登录密码
        cPassword: '', // 确定登录密码
      }
    }
  },
  computed: {
    ...mapState({
      userLanguage: state => state.user.userLanguage
    })
  },
  methods: {
    onResetPassword() {
      if (this.form.newPassword != this.form.cPassword) {
        this.$Message.error(this.$t('public.passwordsMatch'));
        return;
      }
      this.loading = true;
      this.form.email = this.form.email.trim()
      this.form.vcode = this.form.vcode.trim()
      this.form.newPassword = this.form.newPassword.trim()
      this.form.cPassword = this.form.cPassword.trim()
      resetPassword(this.form).then((res) => {
        this.loading = false;
        this.$Message.success(this.$t('forgot.resetSuccess'));
        this.$router.push('/login');
      }).catch(() => {
        this.loading = false;
      })
    },
    sendCode: debounce(function () {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = '';
      }
      this.codeLoading = true;
      sendCodeByEmail({
        email: this.form.email,
        type: 2
      }).then((res) => {
        this.codeLoading = false;
        this.countdown();
      }).catch(() => {
        this.codeLoading = false;
      })
    }, 1000),
    countdown() {
      this.timer = setInterval(() => {
        if (this.num <= 0) {
          clearInterval(this.timer);
          this.timer = '';
          this.num = 60;
        } else {
          this.num = this.num - 1;
        }
      }, 1000)
    }
  }
}
</script>

<style lang="less" scoped>
.wrapper-page {
  width: 100%;
  height: 100vh;
  background-color: #FF72A4;
  display: flex;
  align-items: center;

  .left-wratter {
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .login-img {
      width: 600px;
      height: 680px;
    }
  }

  .right-wrapper {
    width: 50%;
    height: 100%;
    background-color: #ffffff;
    border-radius: 10px;
    padding: 90px 190px;

    .right-content {
      text-align: center;

      .logo-img {
        width: 311px;
        height: 74px;
        margin-bottom: 64px;
      }

      .title-text {
        font-size: 32px;
        color: #222222;
        font-weight: 500;
        text-align: left;
      }

      .div-input {
        margin: 24px 0;
        text-align: left;

        .label {
          margin-bottom: 8px;
          color: @t-title-color;
          font-size: 16px;
          font-weight: 500;
        }

        .code-wrap {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .code {
            width: 102px;
            height: 44px;
            margin-left: 16px;
            background: #ffffff;
            border-radius: 4px 4px 4px 4px;
            opacity: 1;
            overflow: hidden;
            cursor: pointer;
            border: 1px solid @t-table-border-color;

            img {
              display: block;
              width: 100%;
              height: 100%;
            }
          }
        }
      }

      .fun {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 16px;
        font-size: 14px;

        &-item {
          color: #FF186B;
          font-size: 14px;

          &:hover {
            color: @primary-color;
          }
        }

        .text-tips {
          color: #FF186B;
        }
      }

      .btn {
        background: #FF186B;
        border-color: #FF186B;
        height: 60px;
        font-size: 26px;
        border-radius: 10px;
      }
    }
  }
}
</style>
